<template>
    <div class="page-container">
      <div class="banner full relative">
        <img src="@/assets/images/banner-2.jpg" class="full" alt="" />
        <h2 class="title">科室概况</h2>
      </div>
      <div class="section detail">
        <div class="page-content intro-content">
          <div class="detail-img">
            <img src="/src/assets/images/intor/bg1.png" class="full" alt="">
          </div>
          <div class="detail-text">
            <img src="/src/assets/images/border/top1.png" class="border-top" alt="">
            <div class="title">
              <img src="/src/assets/images/border/dot.png" alt="">
              <h3>科室介绍</h3>
              <img src="/src/assets/images/border/dot.png" style="transform: rotate(180deg)" alt="">
            </div>
            <p>中国科学院生物物理研究所研究员，中国科学院核酸生物学重点实验室学术委员会主任。2007年当选为中国科学院院士。2008年获何梁何利基金科学与技术进步奖。2012年获谈家桢生命科学成就奖。2013年获得国家科学技术进步奖二等奖，2014年当选为国际欧亚科学院院士。中国科学院生物物理研究所研究员，中国科学院核酸生物学重点实验室学术委员会主任。2007年当选为中国科学院院士。2008年获何梁何利基金科学与技术进步奖。2012年获谈家桢生命科学成就奖。2013年获得国家科学技术进步奖二等奖，2014年当选为国际欧亚科学院院士。2008年获何梁何利基金科学与技术进步奖。2012年获谈家桢生命科学成就奖。2013年获得国家科学技术进步奖二等奖，2014年当选为国际欧亚科学院院士。2007年当选为中国科学院院士。2008年获何梁何利基金科学与技术进步奖。2012年获谈家桢生命科学成就奖。</p>
          </div>
        </div>
      </div>

      <div class="section honor full">
        <div class="page-content honor-content">
          <div class="title">
            <img src="/src/assets/images/intor/honor-title.png" alt="">
            <h3>科室介绍</h3>
            <img src="/src/assets/images/intor/honor-title.png" style="transform: rotate(180deg)" alt="">
          </div>
          <p>围绕医学信息学、医学影像、临床诊疗辅助技术和生物信息学等领域的研究，承担国家级、省部级、院校级等科研项目32项。获批四川省科学技术厅资助的“四川省医学大数据应用工程技术研究中心”（省上唯一一个医学大数据领域研究中心）。获批四川省发展和改革委员会资助建设“疾病流行病学大数据研究平台”。承担四川大学双一流超前部署“医学大数据”学科和四川大学“医学+信息”中心建设任务。</p>
          <el-carousel :interval="4000" type="card" arrow="always" indicator-position="none" height="2.7rem">
            <el-carousel-item v-for="item in 5" :key="item">
              <img src="/src/assets/images/intor/winner1.png" class="full" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
</script>

<style lang='scss' scoped>
.banner {
  line-height: 0;
  .title {
    font-size: 32px;
    color: white;
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
  }
}

.detail {
  width: 100%;
  height: 673px;
  padding-top: 128px;
  background-color: gray;
  background-blend-mode: blue(red);
  background-image: url("/src/assets/images/main-bg.png");
  
  .intro-content {
    display: flex;
    height: 480px;
    position: relative;
    border: 1px solid #8c8c8c;
    background-color: #0E3879;

    .detail-img {
      flex: 50% 0;
      position: relative;

      img {
        bottom: 0;
        position: absolute;
      }
    }

    .detail-text {
      flex: 1;
      display: flex;
      align-items: center;
      flex-direction: column;
      overflow-y: auto;
      //滚动条样式
      &::-webkit-scrollbar-thumb {
        background-color: #0E3879;
        border-radius: 12px;
        border: 3px solid #1E2735;
      }
      &::-webkit-scrollbar {
        width: 16px;
        background-color: #1E2735;
      }

      .border-top {
        top: -9px;
        right: -1px;
        position: absolute;
        transform: rotate(180deg);
      }

      .title {
        width: 300px;
        color: #36CDFD;
        display: flex;
        align-items: center;
        white-space: nowrap;
        justify-content: space-between;
        img {
          margin: 0 22px;
          height: 15px;
        }
      }

      p {
        color: white;
        font-size: 18px;
        line-height: 36px;
        margin: 24px 48px;
      }

    }
  }
}

.honor {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 1920px;
  height: 794px;
  background-image: url("src/assets/images/intor/honor-bg.png");

  .title {
    color: #F5D28C;
    width: 400px;
    display: flex;
    margin: auto;
    align-items: center;
    white-space: nowrap;
    justify-content: space-between;
    img {
      margin: 0 22px;
      height: 82px;
    }
  }

  p {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 36px;
  }
}

:deep(.el-carousel__mask) {
  background-color: transparent;
}
</style>